<template>
    <div class="address-edit-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                {{title}}
            </template>
        </nav-bar>
        
        <van-address-edit
            class="edit"
            :area-list="areaList"
            :address-info="addressInfo"
            :show-delete="type == 'edit'"
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
        />
    
    </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { reactive, onMounted, toRefs, computed } from 'vue'
import { Toast } from 'vant'
import {addAddress, EditAddress, DeleteAddress, getAddressDetail} from 'network/address';
import {tdist} from 'utils/address';
import { useRoute, useRouter } from 'vue-router'


export default {
    name: "AddressEdit",
    components: {
        NavBar
    },
    setup() {
        const route = useRoute()
        const router = useRouter()
        
        const state = reactive({
            // 地区列表
            areaList: {
                province_list: {},
                city_list: {},
                county_list: {}
            },
            searchResult: [],
            addressInfo:{},
            type:'add',
            addressId: '',
            title:''
        })
        
        onMounted(() => {
            // 省市区 列表 构造出来
            let _province_list = {};
            let _city_list = {};
            let _county_list = {};
    
            // console.log(tdist.getLev1());
    
            tdist.getLev1().forEach(p=>{
                _province_list[p.id] = p.text;
                tdist.getLev2(p.id).forEach(c=>{
                    _city_list[c.id] = c.text;
                    tdist.getLev3(c.id).forEach(q => {
                        _county_list[q.id] = q.text;
                    })
                })
            })
            // console.log(_province_list);
            state.areaList.province_list = _province_list;
            state.areaList.city_list = _city_list;
            state.areaList.county_list = _county_list;
            // 接收参数
            const {type, addressId} = route.query;
            
            state.type = type;
            state.addressId = addressId;
            
            
            
            if(type == 'edit') {
                // 获取地址详细信息
                getAddressDetail(addressId).then(res=>{
                    // 地址信息里面没有区域码
                    console.log(res);
                    const addressDetail = res;
                    
                    let _areaCode = ''
                    const province = tdist.getLev1();
                    
                    // 获取区域码功能 Object.entries拿到键和值
                    Object.entries(state.areaList.county_list).forEach(([id, text]) => {
                        // console.log(id, text);
                        // 先找出当前对应的区
                        if (text == addressDetail.county) {
                            // 找到区对应的几个省份
                            const provinceIndex = province.findIndex(item =>
                                item.id.substr(0, 2) == id.substr(0, 2))
                            // 找到区对应的几个市区
                            // eslint-disable-next-line no-unused-vars
                            const cityItem = Object.entries(state.areaList.city_list).filter(([cityId, city]) =>
                                cityId.substr(0, 4) == id.substr(0, 4))[0]
                            // 对比找到的省份和接口返回的省份是否相等，因为有一些区会重名
                            if (
                                province[provinceIndex].text == addressDetail.province &&
                                cityItem[1] == addressDetail.city) {
                                _areaCode = id
                            }
                        }
                    })
                    
                    state.addressInfo = {
                        name:addressDetail.name,
                        tel:addressDetail.phone,
                        province: addressDetail.province,
                        city:addressDetail.city,
                        county:addressDetail.county,
                        areaCode:_areaCode,
                        addressDetail:addressDetail.address,
                        isDefault: !!addressDetail.is_default
                    }
                })
            }
            
            
        })
        
        const title = computed(()=>{
            return state.type == 'add' ? '新增地址' : '编辑地址';
        })
        
        const onSave = (content) => {
            console.log(content);
            const params = {
                name:content.name,
                phone:content.tel,
                province:content.province,
                city:content.city,
                county:content.county,
                address:content.addressDetail,
                is_default:content.isDefault ? 1 : 0
            }
            
            if(state.type == 'edit') {
                // 修改数据
                EditAddress(state.addressId, params)
            }else if(state.type == 'add') {
                // 调用接口添加数据
                addAddress(params);
            }
            
            
            
            Toast('保存成功');
            setTimeout(()=>{
                router.back();
            }, 1000)
        }
        
        const onDelete = () => {
            DeleteAddress(state.addressId).then(res=>{
                Toast('删除成功');
                setTimeout(()=>{
                    router.back();
                }, 1000)
            })
            
        }
        
        return {
            ...toRefs(state),
            onSave,
            onDelete,
            title
        }
    }
}
</script>

<style lang="scss">
.edit {
    .van-field__body {
        textarea {
            height: 26px!important;
        }
    }
}
.address-edit-box {
    margin-top: 44px;
    .van-address-edit {
        .van-button--danger {
            background: var(--color-tint);
            border-color: var(--color-tint);
        }
        .van-switch--on {
            background:var(--color-tint);
        }
    }
    .van-button {
        background-color: red;
        color: #fff;
    }
}

</style>
